"use client"
import { useImmer } from 'use-immer';
import React, {useEffect, useState} from 'react';
import {Button, Flex, Space} from "antd";
import '@ant-design/v5-patch-for-react-19';
import Link from "next/link";
import { Table } from 'antd';
import {  Input } from 'antd';

function Monitor(props) {

    const [showElement, setShowElement] = useState(true);

    const [listData,updateListData] = useImmer([]);
    // const [listData, setListData]=useState([]);
    // console.log(listData);

    const [apiName, setApiName] = useState("");
    const [apiURL, setApiURL] = useState("");
    const [apiKey, setApiKey] = useState("");

    const handleKeyChange = (e) => {
        setApiKey(e.target.value);
    }

    const handleNameChange = (e) => {
        setApiName(e.target.value);
    }

    const handleUrlChange = (e) => {
        setApiURL(e.target.value);
    }

    const handleAdd = (e) => {
        e.preventDefault();
        setApiURL("");
        setApiName("");
        setApiKey("");
        setShowElement(!showElement);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        // setListData([...listData,{
        //     key: apiKey,
        //     name: apiName,
        //     status:null,
        //     URL: apiURL,
        // }]);
        updateListData(draft => {
            draft.push({
                key: apiKey,
                name: apiName,
                status:null,
                URL: apiURL,
            })
        });
        setApiURL("");
        setApiName("");
        setApiKey("");
        setShowElement(!showElement);

    }

    const [refreshInterval, setRefreshInterval] = useState(5000)

    useEffect(() => {

        // const fetchInterfaces=async ()=>{
        //     let response = await fetch("https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits");
        //     console.log(response.status);
        // }

        const fetchInterfaces=async (items) => {
            const next=items.map(async (item)=>{
                let response = await fetch(item.URL);
                console.log(response.status)
                // return {...item,status:response.status}
                updateListData(draft => {
                    const targetObject = draft.find(element =>
                        element.key === item.key
                    );
                    targetObject.status = response.status;
                })
            })
            await Promise.all(next);
            console.log(items)
        }

        // 设置定时器，每隔 refreshInterval 毫秒刷新数据
        const intervalId = setInterval(fetchInterfaces, refreshInterval,listData);

        // 组件卸载时清除定时器
        return () => clearInterval(intervalId);
    },[refreshInterval,listData])

    // useEffect(() => {
    //     setInterval(async ()=>{
    //         let response = await fetch("https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits");
    //         console.log(response.status);
    //     },5000)
    // },[])

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: 'status',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: 'URL',
            dataIndex: 'URL',
            key: 'URL',
        },
        {
            title: 'Action',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    {/*<a>Invite {record.name}</a>*/}
                    <a>Delete</a>
                </Space>
            ),
        },
    ];

    return (
        <div>
            <h1>Monitor</h1>
            <Flex gap="small" wrap>
                <Link href="/"><Button >返回首页</Button></Link>
                <Button type="primary" onClick={handleAdd}>添加监控接口</Button>
            </Flex>

            <div
                style={{
                    maxWidth: 600,
                    display:showElement?'none':'block',
                }}
            >
                <Input value={apiKey} onChange={handleKeyChange} />
                <Input value={apiName} onChange={handleNameChange} />
                <Input value={apiURL} onChange={handleUrlChange} />
                <Button type="primary" htmlType="submit" onClick={handleSubmit}>
                    Submit
                </Button>
            </div>
        <Table columns={columns} dataSource={listData}   />

        </div>
    );
}



export default Monitor;